import '../public/index'
import url from '../data/url'
import request from '../data/request'
import {tableConfig, header} from '../data/config'
import store from 'store'

const base           = url.base,
      getBankLogPage = request.getBankLogPage,
      getChannelList = request.getChannelList;

let table,
    clickEle, // 当前点击的列表行
    storeData,    // 当前点击列表的数据
    listSearchData = store.get('listSearchData');  // 缓存中的搜索条件

if (listSearchData) {
  for (let key in listSearchData) {
    $('#' + key).val(listSearchData[key]);
  }
}
// 初始化表格
table = $('#table').bootstrapTable($.extend({}, tableConfig, {
  url: base + getBankLogPage,
  pageNumber: listSearchData ? listSearchData.pageNumber : 1,
  pageSize: listSearchData ? listSearchData.pageSize : 10,
  queryParams: function (params) {
    return $.extend({
      currentPage: listSearchData ? listSearchData.pageNumber : params.pageNumber,
      pageSize: listSearchData ? listSearchData.pageSize : params.pageSize
    }, listSearchData ? listSearchData : $('#searchForm').serializeObject())

  },
  columns: [
    {
      field: 'rawAddTime',
      title: '交易时间',
      valign: 'middle',
      formatter: (index, row) => {
        return moment(index).format('YYYY-MM-DD HH:mm:ss')
      }
    }, {
      field: 'channel',
      title: '渠道',
      valign: 'middle'
    }, {
      field: 'realName',
      title: '姓名',
      valign: 'middle'
    }, {
      field: 'idCardNo',
      title: '身份证',
      valign: 'middle'
    }, {
      field: 'tagName',
      title: '操作',
      valign: 'middle'
    }, {
      field: 'excuteStatus',
      title: '状态',
      valign: 'middle',
      formatter: (index, row) => {
        switch (index) {
          case 'success':
            return `<span class="success">成功</span>`
          case 'error':
            return `<span class="fail">失败</span>`
          default:
            return `<span>未知</span>`
        }
      }
    }, {
      field: 'message',
      title: '提醒',
      valign: 'middle'
    }, {
      field: 'action',
      valign: 'middle',
      align: 'center',
      title: '操作',
      formatter: function (index, row) {
        return `<div class="btn-group">
                      <button type="button" data-id="${row.idStr}" class="btn btn-default btn-detail">详情</button>                  
                </div>`
      }
    }]
}))

table.on('load-success.bs.table', () => {
  console.log(table.bootstrapTable('getOptions'))
  if (listSearchData) { // 加载一次缓存的数据 成功后就清除

    listSearchData = false;
    store.set('listSearchData', false);
  }
})

// 初始化日期选择器
$('#startTime').datetimepicker({
  format: "yyyy-mm-dd",
  startView: 3,
  minView: 2,
  autoclose: true
});
$('#endTime').datetimepicker({
  format: "yyyy-mm-dd",
  startView: 3,
  minView: 2,
  autoclose: true
});

// 初始化渠道
getChannel()

function getChannel() {
  let listSearchData = store.get('listSearchData');  // 缓存中的搜索条件

  $.ajax({
    headers: header,
    url: base + getChannelList
  })
    .done(function (res) {
      console.log("初始化渠道 success")
      console.log(res)

      let channel = $('#channel'),
          html    = '<option value="">请选择</option>',
          i       = 0,
          data    = res.object,
          len     = data.length

      for (; i < len; i++) {
        html += `<option ${listSearchData && listSearchData.channel === data[i].channelCode ? 'selected' : ''} value="${ data[i].channelCode }">${ data[i].channelName }</option>`
      }

      channel.html(html)

    })
    .fail(function (res) {
      console.log(res)

      layer.msg('渠道获取失败', {
        icon: 5
      })

      console.log("error")
    })
    .always(function (res) {

      console.log("complete")
    })

}

// 点击列表的时候传递数据到全局变量
table.on('click-row.bs.table', (e, data, el) => {

  storeData = data
  clickEle  = el

})

// 搜索
$('#search-btn').on('click', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({}, $('#searchForm').serializeObject())
  })
})

// 详情
$(document).on('click', '#table .btn-detail', (e) => {
  e.preventDefault()

  store.set('storeData', storeData) // 存储当前点击的数据到缓存，在修改页面再获取

  let tableData      = table.bootstrapTable('getOptions'),
      listSearchData = $.extend($('#searchForm').serializeObject(),
        {
          pageNumber: tableData.pageNumber,
          pageSize: tableData.pageSize
        });

  store.set('listSearchData', listSearchData);

  window.location = './detail.html?id=' + storeData.idStr

  console.log('详情');
})
